<template>
  <header>
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
      <span>编目管理系统</span>
    </div>
    <div class="head-right">
      <div style="padding-left: 30px;color: #aaa">
        欢迎你，管理员
      </div>
      <div class="exit" @click="logout">
        <el-icon>
          <SwitchButton/>
        </el-icon>
      </div>
    </div>
  </header>
  <aside>
    <div class="sidebar-menu">
      <el-menu class="menu">
        <li class="menu-title"><span>Main Menu</span></li>
        <template v-for="(item, index) in menuData" :key="item.name">
          <template v-if="!item.sub">
            <el-menu-item :index="index+''" class="submenu item" :class="$route.path === item.link ? 'is-active': ''">
              <router-link :to="item.link">
                <el-icon>
                  <component :is="item.icon"/>
                </el-icon>
                <span slot="title">{{ item.name }}</span>
              </router-link>
            </el-menu-item>
          </template>
          <template v-else>
            <div class="el-menu-item ft" style="display: flex;">
              <el-icon>
                <Notebook/>
              </el-icon>
              <span class="title">
                {{ item.name }}
              </span>
              <el-icon class="down">
                <ArrowDown/>
              </el-icon>
            </div>
          </template>
          <el-menu-item v-for="(sub, key) in item.sub" :index="index+key+''" class="submenu"
                        :class="$route.path === sub.link ? 'is-active': ''">
            <router-link :to="sub.link">
              <i class="el-icon-s-home"></i>
              <i class="el-icon-s-home"></i>
              <span slot="title">{{ sub.name }}</span>
            </router-link>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </aside>
  <main>
    <section class="container">
      <div class="item">
        <section class="page-wrapper">
          <router-view></router-view>
        </section>
      </div>
    </section>
  </main>
  <footer>
    Copyright © 2023 By 沧州交通学院 — 软件工程2202（专升本）— 七组
  </footer>
</template>
<script setup>

import {reactive, onMounted} from "vue";
//引入路由函数
import {useRouter} from "vue-router";
//使用路由
const router = useRouter();

//定义响应数据
let userInfo = reactive({
  userId: '',
  loginId: '',
  userName: ''
})
const menuData = [
  {
    name: '首页',
    icon: 'House',
    link: '/admin/home'
  },
  {
    name: '用户管理',
    icon: 'User',
    link: '/admin/userlist'
  },
  {
    name: '编目管理',
    icon: 'Reading',
    link: '/admin/catalogue'
  },
  {
    name: '个人信息',
    icon: 'Document',
    link: '/admin/info'
  },
  {
    name: '图书管理',
    icon: '',
    link: '',
    sub: [
      {
        name: '出版社管理',
        icon: '',
        link: '/admin/publish'
      },
      {
        name: '文献尺寸管理',
        link: '/admin/size'
      },
      {
        name: '文献语种管理',
        icon: '',
        link: '/admin/language'
      },
      {
        name: '文献类型管理',
        icon: '',
        link: '/admin/type'
      }
    ]
  }
]
//使用生命周期函数
onMounted(() => {
//获得登录用户信息
  userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  // 登录跳转对应路由
  const userType = userInfo?.userType
  if (userType === 0) {
    router.push("/admin")
  } else {
    router.push("/user")
  }
})
//定义自用方法(箭头函数形式)
const logout = () => {
  sessionStorage.removeItem('userInfo')
  router.push('/')
}

</script>
<style lang="scss">
@import "@/style/list";

.head-right {
  position: relative;
}

.exit {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  font-size: 22px;
  color: darkred;
  cursor: pointer
}
</style>
